<template >

<div class="login">
  <a href="/home"><img src="@/assets/img5.png" alt="" class="close"></a>
  <h1>OMINI.cn</h1>
  <van-form @submit="onSubmit">
  <van-field
    class="phone"
    v-model="phone"
    name="phone"
    label="手机号"
    :rules="[{ required: true, message: '请填写手机号' }]"
  />
  <van-field
    class="yanzhengma"
    v-model="code"
    name="code"
    label="验证码"
    :rules="[{ required: true, message: '请填写密码' }]"
  />
  <span class="obtain" @click="handleGetCode">
    获取验证码
    <span v-if="limit > 0">({{limit}})</span>
    </span>
  <div class="btn" style="margin: 40px;" >
    <van-button round block type="info" native-type="submit"
    :style="{background:'#c1ab97',
    border:'none'}">登录</van-button>
  </div>
  <van-divider :style="{margin: '40px' , marginTop:'80px'}">
    社交账号登录
  </van-divider>
  </van-form>
  <div class="weChat">
    <ul>
      <li><a href="#"><img src="@/assets/img2.gif" alt=""></a></li>
      <li><a href="#"><img src="@/assets/img3.gif" alt=""></a></li>
      <li><a href="#"><img src="@/assets/img4.gif" alt=""></a></li>
    </ul>
  </div>
  <span :style="{color:'#968e88',float:'left', margin:'120px'}">BY OMINI.BASS</span>
  </div>

</template>

<script>
import {
  getCode,
  // loginAsync,
} from '@/api/login'
import { throttle } from '@/utils/tools'

export default {
  name: 'Login',
  data() {
    return {
      phone: '',
      code: '',
      limit: 0, // 可再次获取验证码的倒计时
      userInfo: [],
    }
  },
  created() {
    this.handleGetCode = throttle(this.handleGetCode, 60000)
  },
  methods: {
    // 登录处理
    async onSubmit(values) {
      // console.log('submit', values)
      // const result = await loginAsync(this.phone, this.code)
      // console.log('登录：', result)

      const result = await this.$store.dispatch('user/loginAction', values)
      const res = this.$store.state.user.userInfo
      this.userInfo.push({
        ...res,
      })
      const data = this.userInfo.some(item => {
        return item.phone === this.phone
      })
      if (result) { // 为 true，则登录成功
        console.log(data)
        if (!data) {
          this.$router.push('/home')
        } else {
          this.$router.push('/newUser')
        }
      } else {
        this.$toast({
          type: 'fail',
          message: '电话号码或验证码错误',
        })
      }
    },
    // 获取验证码处理
    async handleGetCode() {
      // 记录倒计时时间
      this.limit = 60
      const start = +new Date()
      this.timer = setInterval(() => {
        // 计时消耗时间
        const elapsed = Math.floor((+new Date() - start) / 1000)
        // 计算剩余时间
        this.limit = 60 - elapsed
        // 剩余时间小于0，则停止计时
        if (this.limit <= 0) {
          clearInterval(this.timer)
        }
      }, 1000)
      // 发送网络请求，获取验证码
      const result = await getCode(this.phone)
      this.$toast({
        message: '验证码：' + result.code,
        type: 'success',
      })
      console.log('获取验证码:', result)
    },
  },
}
</script>

<style lang="less" scoped>
  .login{
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: url('@/assets/shouye.png');
    .close{
      float: right;
      width: 40px;
      height: 40px;
      margin: 20px;
    }
    h1{
      color: #e8e8e8;
      margin-top: 150px;
      margin-bottom: 100px;
      margin-left: 80px;
      font-size: 32px;
    }
    /deep/.van-field__label{
      color: #fff;
      margin-left: 15px;
    }
    /deep/.van-cell{
      background: url('@/assets/shouye.png');
    }
    .obtain{
      color: #fff;
      font-size: 14px;
      position: relative;
      left: 500px;
      top: -63px;
      cursor: pointer;
    }
    .weChat{
      width: 440px;
      height: 30px;
      margin-left: 140px;
      ul{
        display: flex;
        justify-content: space-between;
      }
    }
  }
</style>
